<template>
  <div class="page">
    <!-- 导航栏 -->
    <nut-navbar @on-click-back="back" :rightShow="false">
      <nut-searchbar v-model="songname" placeText="搜索歌曲" searchBtnIconColor="#000" @submit="atsearch"></nut-searchbar>
    </nut-navbar>
    <!-- 歌曲列表 -->
    <div class="main">
        <p v-if="results.length==0">暂无歌曲</p>
      <nut-cell :is-link="true" :show-icon="true" v-for="item in this.results" :key="item.id">
        <span slot="title">{{item.name}}</span>
        <span slot="sub-title">歌手：{{item.artists[0].name}}</span> 
      </nut-cell>
    </div>
    <!-- 当前播放歌曲组件 -->
    <cursong></cursong>
  </div>
</template>
<script>
import { url, search } from "../../api/api";
import cursong from '../music/cursong'
export default {
  data() {
    return {
      show: false,
      songname: this.$route.params.searchsong, //  搜索的歌名
      results: this.$route.params.results //  搜索后的结果
    };
  },
  components:{
      cursong
  },
  methods: {
    //  返回的回调函数
    back() {
        this.$router.go(-1)
    },
        //  实时搜索
    atsearch() {
      this.$axios
        .get(`${url}${search}`, {
          params: {
            keywords: this.songname
          }
        })
        .then(
          data => {
              console.log(data.data)
            if (data.data.code == 200) {           
              if (this.results.length > 10) {
                this.results.length = 10;
              }
              this.results = data.data.result.songs;
              console.log(this.results)
            }
          },
          err => {
            this.$notify.danger(err.data.msg);
          }
        );
    }
  }
};
</script>
<style scoped>
.page{
    height: 100vh;
}
.nut-searchbar {
  height: 30px;
  margin-top: 8px;
}
.main {
    height: 585px;
    overflow-y: scroll;
}
.main .nut-cell {
    margin-top: 10px;
}
.main .nut-cell .nut-cell-title {
   line-height: 1;
}
.nut-cell-title span {
  display: inline-block;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
</style>